<template>
    <div class="feature-test-container">
      <el-card style="background-color: #3C3F41;width: 80%;margin: 0 auto;border: 5px groove #b15b2e;padding:3px">
        <el-tabs>
        <el-tabs type="card" style="color: #9E9F9F" v-model="selectedTab" @tab-click="handleClick">
          <el-tab-pane name="用户管理">
            <span slot="label" class="feature-test-tabs-label ">扫描仪</span>
            <el-row :gutter="24">
              <el-col :span="16">
                <Show3DModel></Show3DModel>
              </el-col>
              <el-col :span="8">
                <el-card style="height: 595px;background-color: #3C3F41;color: #9E9F9F; text-align: center;border: 5px groove #E6A23C;padding:3px">
                    <el-button type="primary" @click="startScan">开始扫描</el-button>
                    <ConveyorBeltTest></ConveyorBeltTest>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="机械臂点位文件">
            <span slot="label" class="feature-test-tabs-label">机械臂点位文件</span>
            <el-row :gutter="24">
              <el-col :span="16">
                <CreatePointAs></CreatePointAs>
              </el-col>
              <el-col :span="8">
                <StartAxios></StartAxios>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tabs>
      </el-card>
    </div>

</template>

<script>
  import Show3DModel from "../console/Show3DModel";
  import ConveyorBeltTest from "./ConveyorBeltTest";
  import StartAxios from "./StartAxios";
  import CreatePointAs from "./CreatePointAs";
  import {mapMutations, mapState} from "vuex";
    export default {
        name: "WorkBench",
        data(){
          return{
            selectedTab: "用户管理",
          }
        },
      components: {
          Show3DModel, ConveyorBeltTest, StartAxios, CreatePointAs

      },
        methods:{
          ...mapMutations([
            'activeLoadState',
            'activeScanState'
          ]),
          handleClick(tab, event){

          },
          startScan(){
          this.ws.send('start scan')
          this.msgList.push({
                      'component': 'msgBox',
                      'id': 0,
                      'content': 'Scanning start',
                      'msgLevel': 'info',
                      'code': -1,
                    });
          this.activeLoadState()
          this.activeScanState()
        }

        },
      computed: {
          ...mapState([
             'msgList', 'ws', 'loading', 'isStartScan'
         ])
      }
    }
</script>

<style scoped>
.feature-test-container {
    background-color: #2B2B2B;
    width: 100% ;
    margin-top: 0px ;
    padding-top: 20px  ;
}
.feature-test-tabs-label {
  color: #9E9F9F
}

.feature-test-tabs-label:hover {
  color: #b15b2e;
}
</style>
